<template>
  <div id="ApplyLaboratoryList">
    <Row v-if="showDetails">
      <Col offset="4">
        <div id="div_preview" >
         <Row class="row_Preview">
          <Col >
            <Col span="7" v-for="(item,index) in formListA" :key="index">
              <span  class="font_Prview">{{item.lable}}：</span><span>{{formFoundation[item.prop]}}</span>
            </Col>
          </Col>
        </Row>
        <Row class="row_Preview">
         <Col >
          <Col span="7" v-for="(item,index) in formListB" :key="index">
            <span  class="font_Prview">{{item.lable}}：</span><span>{{formFoundation[item.prop]}}</span>
          </Col>
        </Col>
      </Row>
      <Row class="row_Preview" v-model="formListC">
        <Col span="2">
         <div>
           <span  class="font_Prview">成绩：</span>
         </div>
       </Col>
       <table id="table_Style">
         <tr>
           <td class="td_Style"  v-for="(item,index) in formListC" :key="index" >{{item.grade}}</td>
         </tr>
         <tr>
           <td  class="td_Style" v-for="(item,index) in formListC" :key="index" >{{item.gradeScore}}</td>
         </tr>
       </table>
     </Row>
     <Row class="row_Preview" >
      <Col>
       <Tabs id="tabs_Style">
        <TabPane  label="简介：">
          <div id="div_reason" >{{formFoundation.remark}}
          </div>
        </TabPane>
        <TabPane label="申请加入实验的理由：">
          <div  id="div_reason" >{{formFoundation.reason}}</div></TabPane>
        </Tabs>
      </Col>
    </Row>
  </div>
</Col>
<Row style="margin-top:20px;">
  <Col offset="10" span="2"><Button type="warning"@click="showDetail(false)">返回</Button></Col>
  <Col span="1"><Button type="info"@click="check()">通过</Button></Col>
</Row>
</Row>
<Row style="margin-top: 50px"  v-else>
  <Col span="22" offset="1">
    <Row>
      <Col >
       <Badge :count="count">
        <Icon type="ios-bell-outline" size="26"></Icon>
      </Badge>
    </Col>
  </Row>
  <Row style="margin-top: 10px">
    <Table @on-row-dblclick="cilikRow"  border :columns="tableHead" :data="tableBody"></Table>
  </Row>
  <Row style="margin-top:10px">
    <Col offset="10">
      <Page :total="total" :current="currentPage" @on-change="handleCurrentChange"></Page>
    </Col>
  </Row>
</Col>
</Row>
</div>
</template>
<script>
  import {postDataToServer} from "../../assets/js/post.js"
  export default {
    name: 'ApplyLaboratoryList',
    created()
    {
      // this.postData();
      this.sumCount();
    },
    watch:
    {
      tableBody()
      {
       this.sumCount();
     }
   },
   data() {
    return {
      formFoundation: {
        name:'1',
        college:'515',
        num: '',
        sex: '',
        class: '',
        conect:'',
        grades:'高数,100;离散,200;'
      },
      gradeSpan:5,
      formListC:[],
      tableHead: [
      {
        title: '状态',
        key: 'status',
        width:'80px',
        align:"center",
        render: (h, params) => {
          return h('div', [
            h('Icon', {
              props: {
                type: params.row.status,
              }
            }),
            ]);
        }
      },
      {
        title: '姓名',
        key: 'name',
        width:"120px",
        align:'center'
      },
      {
        title: '学院',
        key: 'college',
        align:"center"
      },
      {
        title:'班级',
        key:'class',
        align:'center',
      },
      {
        title:'邮箱',
        key:'conect',
        align:'center',
      },
      {
        title:'日期',
        key:'sub_time',
        align:'center',
        sortable: true
      },
      {
        title:'审核',
        key:'is_check',
        width:'100px',
        align:'center',
        filters: [
        {
          label: '通过审核',
          value: 1
        },
        {
          label: '未审核',
          value: 2
        }
        ],
        filterMultiple: false,
        filterMethod (value, row) {
          if (value === 1) {
            return row.is_check === "ivu-icon ivu-icon-android-star";
          } else if (value === 2) {
            return row.is_check===""
          }
        },
        render: (h, params) => {
          return h('div', [
            h('Icon', {
              props: {
                type: params.row.is_check,
                color:'red',
              }
            }),
            ]);
        }
      },
      {
        title: '操作',
        align: 'center',
        width:"120px",
        render: (h, params) => {
          return h('div', [
            h('Button',{
              props:{
                type:"error",
                size:'small',
              },
              style:{
                marginRight :'5px'
              },
              on:{
                click: () => {
                  this.delect(params.index);
                }
              }
            },'删除'),
            ]);
        }
      }
      ],
      formListA:[
      {
        lable:'姓名',
        prop:'name',
      },
      {
        lable:'学院',
        prop:'college',
      },
      {
        lable:'学号',
        prop:'num',
      }],
      formListB:[
      {
        lable:'性别',
        prop:'sex',
      },
      {
        lable:'班级',
        prop:'class',
      },
      {
        lable:'邮箱',
        prop:'conect',
      }],
      total:100,
      rowIndex:"",
      count:0,
      showDetails:false,
      tableBody: [{
         name:'1',
        college:'515',
        num: '',
        sex: '',
        class: '',
        conect:'',
        grades:'高数,100;离散,200;'
      }],
      checkAlredy:0,
      Page:1,
      currentPage:1,
      _row:{},
   }
 },
 methods:
 {
  showDetail(boolean)
  {
    this.showDetails=boolean;
    this.sumCount();
  },
  handleCurrentChange(page)
  {
    this.Page=page;
    this.postData();
  },
  check()
  {
    this.tableBody[this.rowIndex].is_check="ivu-icon ivu-icon-android-star";
    this.checkSuccess(this._row.id);
  },
  changStatus(index)
  {
    var params={};
    var parameter =  new Object();
    params.url="APPLY_GET";
    parameter.id =this.tableBody[index].id;
    params.parameter = parameter;
    postDataToServer(params).then((data)=>{
    });
  },
  delect(index)
  {
      var id=this.tableBody[index].id;
        this.delectData(id);
    },
    postData()
    {
     var params={};
     params.url="APPLY_LISTPAGE";
     var parameter={};
     parameter.page_no=this.Page;
     parameter.page_size=8;
        params.parameter=parameter;
        postDataToServer(params).then((data)=>{
          this.writeData(data.data);
        });
      },
      writeData(data)
      {
        for(var i=0,n=data.count;i<n;i++)
        {
          if(data.rows[i].is_check===1)
          {
            data.rows[i].is_check="ivu-icon ivu-icon-android-star";
          }
          if(data.rows[i].status===0)
          {
            data.rows[i].status="social-snapchat-outline";
          }
          if(data.rows[i].sex===0)
          {
            data.rows[i].sex="女"
          }
          if(data.rows[i].sex===1)
          {
            data.rows[i].sex="男"
          }
        }
        this.tableBody=data.rows;
        this.total=data.count;
      },
      sumCount()
      {
       this.count=0;
       for(var i=0,n=this.tableBody.length;i<n;i++)
       {
        if(this.tableBody[i].status==="social-snapchat-outline")
        {
          this.count++;
        }
      }
    },
    cilikRow(rows,index)
    {
      this.tableBody[index].status="";
      this.rowIndex=index;
      this._row=rows;
      this.changStatus(index);
      this.showDetail(true);
      this.formFoundation=rows;
      var result=rows.grades.split(";");
      var result1=[];
      var grade=[];
      for(var i=0;i<result.length-1;i++)
      {
        result1=result[i].split(",");
        var obj={};
        for(var j=0,n=result1.length;j<n;j++)
        {
           if(j===0)
           {
           obj.grade=result1[j];
         }
         else
         {
           obj.gradeScore=result1[j];
         }
        }
        grade.push(obj);
      }
      this.formListC=grade;
      console.log(this.formListC);
    },
    delectData(id)
    {
      var params={};
      var parameter =  new Object();
      params.url="APPLY_DEL";
      parameter.id = id;
      params.parameter = parameter;
      postDataToServer(params).then((data)=>{
        this.postData();
      });
    },
    checkSuccess(id)
    {
      var params={};
      var parameter =  new Object();
      params.url="APPLY_VERIFY";
      parameter.id = id;
      params.parameter = parameter;
      postDataToServer(params).then((data)=>{
        if(data.message==="success")
        {
         const h = this.$createElement;
         this.$message({
          message: h('p', null, [
            h('span', null, '审核通过'),
            ])
        });
       }
      });
    }
  }
}
</script>

<style>
  #ApplyLaboratoryList
  {
    /*background-image: url("../../../static/img/timg1.jpg");*/
    /*background-repeat:no-repeat;*/
    /*background-size: 100%;*/
    width:100%;
    height: 100%;
  }
  .td_Style{
    border:1px solid #DADADA
  }
  .pageTitle{
    font-size: x-large;
    font-weight: bold;
    color: blue;
    padding: 2%;
    letter-spacing: 8px;
  }
  .row_Preview
  {
    padding-top: 20px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  #tabs_Style
  {
    width: 70%;
    color:#EDA448;
    /*text-shadow : #DADADA 2px 2px 1px;*/
     text-shadow : black 2px 2px 1px;
    font-size: 17px
  }
  #table_Style
  {
    border:1px solid #DADADA;
    width: 73%;
    border-collapse:collapse;
    box-shadow : #DADADA 2px 2px 1px;
    text-align: center
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  #div_reason
  {
    width: 90%;
    word-wrap: break-word;
    color:black;font-size: 15px
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  #div_preview
  {
    font-size:15px;
    text-align:left;
    margin-top:150px;
  }
  .font_Prview
  {
    color:#EDA448;
    /*text-shadow : #DADADA 2px 2px 1px;*/
    text-shadow : black 2px 2px 1px;
    font-size: 17px
  }
  .ivu-icon
  {
    font-size: 20px;
  }
  .iconStyle
  {
    background-color:red;
  }
</style>
